<template>
  <div class="sun_main_aaa">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">活动管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-row class="search_row">
            <el-col :span="6" class="search_title">
              <div>地址:</div>
            </el-col>
            <el-col :span="18" class="scroll_input">
              <el-input
                  size="mini"
                  placeholder="检索地址">
              </el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <div class="search_row">
            <el-button type="primary" size="mini" @click="queryList">搜索</el-button>
          </div>

        </el-col>
      </el-row>
      <div style="overflow: auto ;height: 450px;">
        <el-table :data="data" stripe size='mini'
                  :cell-style="{'text-align':'center'}"
                  :header-cell-style="{background:'rgb(17,23,57)','text-align':'center'}">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="purviewUrl" label="接口地址"></el-table-column>
          <el-table-column prop="purviewName"  label="接口名称"></el-table-column>
          <el-table-column prop="method"  label="请求方式"></el-table-column>
          <el-table-column prop="roleNames"   label="所需角色">

            <template slot-scope="scope">
              <el-tag style="margin-left: 5px" size="mini" :type="typeCss[i>=4?i-4:i]" v-if="scope.row.role.length>0"
                      v-for="(item,i) in scope.row.role">{{ item }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <!--详情-->
              <edit-box btn-type="detail"
                        @click.native="addEdit({name:$t('common.view'),type:true ,id:scope.row.id})"></edit-box>
            </template>
          </el-table-column>
        </el-table>


        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[7,15,20]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import editBox from '../component/editBox'
import {queryMapList} from '@/api/MallSysPurviewApi.js'

export default {
  components: {editBox},
  data() {
    return {
      data: [],
      page: {current: 1, size: 7, total: 0},
      queryData: {
        queryBean : {},
        page: {current: 1, size: 7}
      },
      typeCss: ['', 'success', 'info', 'warning', 'danger']
    };
  },
  watch: {},
  methods: {
    queryList() {

    },
    queryPage() {
      queryMapList(this.queryData).then(res => {
        // this.data = res.data.list

        this.data = res.data.list.records
        this.page.total =Number(res.data.list.total)
        this.page.current = Number(res.data.list.current)
        this.page.size = Number(res.data.list.size)
      })
    },
    addEdit(res) {
      this.$router.push({path: '/ApiPurviewUptIndex', query: {name: res.name, type: res.type, id: res.id}})
    },
    // 监听每页展示的条数
    handleSizeChange(newSize) {
      this.queryData.page.size = newSize
      this.queryPage()
    },
    //监听页码
    handleCurrentChange(newCurrent) {
      this.queryData.page.current = newCurrent
      this.queryPage()
    },
  },
  created() {
    this.queryPage()
  }
};
</script>

<style lang="less" scoped>
.search_row {
  padding: 10px;

  .search_title {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    margin-bottom: 20px;
  }

  .scroll_input {
    height: 30px;
  }
}

.sun_table {
  width: 100%;
  display: flex;

  .sun_table_td {
    padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 24%;
    text-align: center;
    //line-height: 60px;
  }
}

.sun_table_th {
  width: 100%;
  display: flex;
  background: rgb(17, 23, 57);
  font-size: 12px;
  height: 36px;
  color: #ffffff;
  line-height: 36px;

  .sun_table_td {
    padding-left: 15px;
    width: 24%;
    text-align: center;
  }
}

</style>
<style>
.sun_main_aaa .el-tree-node .el-tree-node__content {
  height: 60px;
}
</style>
